<template>
  <el-dropdown @command="eventHandler">
    <!--  下拉选项框按钮  -->
    <span class="el-dropdown-link">
      <el-button type="primary" size="small " icon="el-icon-plus" circle></el-button>
    </span>
    <!--  下拉选项  -->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="uploadFile">上传文件</el-dropdown-item>
      <el-dropdown-item command="createFolder">新建文件夹</el-dropdown-item>
    </el-dropdown-menu>
    <!--  上传文件组件，dialogVisible控制渲染状态，false不显示  -->
    <UploadFile :dialogVisible="dialogFileVisible" @close="closeEvent"></UploadFile>
    <!-- 创建文件夹组件 -->
    <CreateFolder :dialogVisible="dialogFolderVisible" @close="closeEvent"></CreateFolder>
  </el-dropdown>
</template>

<script>
export default {
  name: "UpLoad",
  data() {
    return {
      dialogFileVisible: false,  // 上传文件对话框
      dialogFolderVisible: false  // 创建文件夹对话框
    }
  },
  methods: {
    eventHandler(e) {
      if (e === 'uploadFile') this.dialogFileVisible = true;
      if (e === 'createFolder') this.dialogFolderVisible = true;
    },
    // 对话框关闭回调
    closeEvent() {
      this.dialogFileVisible = false;
      this.dialogFolderVisible = false;
    }
  }
}
</script>

